<!--
 * @Author: your name
 * @Date: 2021-11-05 15:20:44
 * @LastEditTime: 2021-11-07 11:09:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \ej-app2\src\views\OrderConfirm.vue
-->
<template>
    <!-- 导航栏 -->
    <van-nav-bar
        title="订单确认"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
    />

    <!-- 订单详情 -->
    <van-cell-group inset>
        <van-cell title="订单详情" >
            <template #label>
                <van-row v-for="item in order_data.orderLines" :key="item.productId" justify="space-between">
                    <van-col span="8">{{item.name}}</van-col>
                    <van-col span="8">￥{{item.price}}</van-col>
                    <van-col span="8">X {{item.number}}</van-col>
                </van-row>
            </template>

            <template #value>
                <van-row>
                    总价 :{{sum}}
                </van-row>
            </template>

        </van-cell>
    </van-cell-group>

    <!-- 地址展示,点击弹出地址选择 -->
    <!-- 默认显示的地址 -->
    
    <addres @getAddreId="getAddreId"/>

    <!-- 服务时间 -->
    <van-cell-group inset @click="stime_show=true">
        <van-cell title="服务时间" >
            {{getData}}
        </van-cell>
    </van-cell-group>
    <!-- 选择时间 -->
    <van-datetime-picker
        v-show="stime_show"
        v-model="nowDate"
        type="datetime"
        title="选择完整时间"
        @confirm="service_time"
        @cancel="stime_show=false"
        :min-date="minDate"
        :max-date="maxDate"
    />

    <!-- 提交订单 -->
    <div class="button">
        <van-button round type="primary" size="large" @click="confirm_order">确认付款</van-button>
    </div>
    <!-- {{order_data}} -->
    <!-- {{user_data}} -->
    <!-- {{order_data.addressId}} -->
  
</template>

<script>
import Addres from '../components/Addres.vue'
import {getUserInfo} from '@/utils/auth';
import { post_json } from '../utils/axios';
export default {
    components: { Addres },
    data(){
        return{
            nowDate:new Date(),//当前时间对象
            minDate:new Date(2020, 0, 1),
            maxDate:new Date(2025, 10, 1),  
            stime_show:false,//选择时间的显示控制
            order_data:{
                // addressId:addressId
            },//最终交付的订单对象
            sum:0,//总价
            user_data:"",//用户数据
            
        }
    },

    methods:{
        // 获取子组件传来的id
        getAddreId(id){
            this.order_data.addressId=id
        },
         // 计算服务的最早开始时间和最晚开始时间
        getMMdate(){
            this.minDate=new Date(this.nowDate.getFullYear(),this.nowDate.getMonth(),this.nowDate.getDay());
            this.maxDate=new Date(this.nowDate.getFullYear(),this.nowDate.getMonth()+1,this.nowDate.getDay());
            // console.log(this.nowDate.getMonth()+1) 
        },
        // 选择服务时间回调
        service_time(value){
            this.nowDate=value;
            this.stime_show=false;
        },


        // 最终确认的订单
        confirm_order(){
            this.order_data.customerId=this.user_data.id
            this.order_data.serviceTime=this.nowDate.getTime()
            // 判断余额
            if(this.user_data.balance>this.sum&&this.order_data.addressId!=null){
                post_json("/order/submitOrder",this.order_data).then((res)=>{
                    // console.log(res)
                    if(res.status==200){
                        this.$router.push('/note')
                    }
                })
            }else{
                alert('余额不足或地址为空')
            }

        }
    },
    created(){
        this.getAddreId();
        this.getMMdate(); 

        // 获取用户数据 -token
        getUserInfo().then((res)=>{
            this.user_data=res.data   
        });
        // 计算订单
        let orders=JSON.parse(this.$route.query.data);
        let order_arr=[];//订单数组
        this.sum=0;
        console.log(orders)

        // 处理订单基本信息
        for(let k in orders){
            this.sum+=orders[k].price*orders[k].number;//计算总价
            let obj={};
            obj.number=orders[k].number;
            obj.price=orders[k].price;
            obj.productId=orders[k].id;
            obj.name=orders[k].name;//产品名称
            order_arr.push(obj)
        }
        this.order_data.orderLines=order_arr;
        
    },

    computed:{
        getData(){
            return this.nowDate.getFullYear()+'-'+parseInt(this.nowDate.getMonth()+1)+'-'+this.nowDate.getDate()+' '+this.nowDate.getHours()+":"+this.nowDate.getMinutes();
        },     
    }
}
</script>


<style scoped>

    /deep/ .van-cell{
        border-radius: 15px;
        box-shadow: 1px 2px 2px 2px rgb(224, 224, 224);
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(204, 204, 204);
        margin-top: 3px;
    }

    .time{
        font-family: '黑体';
        font-size: 18px;
        color: rgb(127, 173, 216);
        margin-bottom: 3px;
    }

    .van-datetime-picker{
        background-color: rgb(253, 253, 253);
    }

    .button{
        margin-top: 10px;
    }
</style>